<template>
  <div class="banner">
    <el-col :span="24" class="action-bar">
      <el-button @click="$router.back(-1)" type="primary" size="medium" style="margin: 0 20px;">返回</el-button>
			<el-button type="primary" size="medium" @click="addBtnReset" style="margin: 0 20px;">新增</el-button>
    </el-col>

    <!--列表-->
		<el-table :data="bannerList" highlight-current-row class="el-table-style">
			<el-table-column prop="id"label="序号" min-width="60" sortable></el-table-column>
      <el-table-column prop="id" label="规格编码" min-width="100" sortable></el-table-column>
      <el-table-column prop="spu_name" label="规格名称" min-width="100" sortable></el-table-column>
      <el-table-column prop="price" label="价格" min-width="100" sortable></el-table-column>
      <el-table-column prop="stock" label="库存" min-width="100" sortable></el-table-column>
      <el-table-column prop="status_name" label="状态" min-width="100" sortable></el-table-column>
      <el-table-column prop="created_at" label="创建时间" min-width="100" sortable></el-table-column>
			<el-table-column prop="sort" label="排序" min-width="100" sortable>
			</el-table-column>
			<el-table-column label="操作" min-width="150">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="getGoodsSpuDetail(scope.row.id)">编辑</el-button>
					<el-button type="danger" class="danger-btn" size="mini" @click="delGoodsSpu(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<!-- <div class="batch"><el-button size="medium ">批量删除</el-button></div> -->
			<div class="page-code">
				<el-pagination
					background
					layout="prev, pager, next"
					:total="pageTotal"
					:page-size="limit"
          :current-page="page"
					@current-change="getGoodsSpuList"
				>
			</el-pagination>
			</div>
    </el-col>

    <!-- 新增 -->
		<el-dialog title="添加商品规格" :visible.sync="addFormVisible" width="40%">
			<el-form label-width="80px">
				<el-form-item label="规格编号">
					<el-input v-model="addForm.spu_name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="规格">
					<el-input v-model="addForm.specification" auto-complete="off"></el-input>
				</el-form-item>
        <el-form-item label="价格">
          <el-input v-model="addForm.price" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="addForm.stock" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="addForm.sort" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="addForm.status" placeholder="请选择">
            <el-option label="开启" value="1"></el-option>
            <el-option label="关闭" value="0"></el-option>
          </el-select>
        </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addCancelBtn">取消</el-button>
				<el-button type="primary" @click="addSubmitBtn">提交</el-button>
			</div>
		</el-dialog>
    <!-- 编辑 -->
		<el-dialog title="编辑商品规格" :visible.sync="editFormVisible" width="40%">
      <el-form label-width="80px">
        <el-form-item label="规格编号">
          <el-input v-model="editForm.spu_name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="editForm.specification" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="editForm.price" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="editForm.stock" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="editForm.sort" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editForm.status" placeholder="请选择">
            <el-option label="开启" value="1"></el-option>
            <el-option label="关闭" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editCancelBtn">取消</el-button>
				<el-button type="primary" @click="editSubmitBtn">提交</el-button>
			</div>
		</el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      merchant_medicine_id: '',
      addFormVisible: false,//新增界面是否显示
      editFormVisible: false,//编辑界面是否显示
			addImageUrl:'',
			pageTotal:0,
      page: 1,
			limit:10,
      //新增界面数据
			addForm: {
        merchant_medicine_id:'',
        spu_name:'',
        specification:'',
        price: '',
        stock: '',
        sort: '',
        status: ''
			},
			//编辑界面数据
			editForm: {
				id:'',
        merchant_medicine_id:'',
        spu_name:'',
        specification:'',
        price: '',
        stock: '',
        sort: '',
        status: ''
			},
			bannerList:[],
    }
	},
	mounted(){
    this.addForm.merchant_medicine_id = this.$route.query.id
		this.getGoodsSpuList();
	},
  methods:{
	  onCopy(e){
			this.$message({
				type:'success',
				message:'复制成功'
			})
		},
		onError(erro){
			this.$message({
				type:'error',
				message:'复制失败'
			})
		},

		//新增取消按钮
		addCancelBtn(){
			this.addFormVisible = false;
		},
    //编辑取消按钮
		editCancelBtn(){
			this.editFormVisible = false;
		},
		//新增按钮重置表单
		addBtnReset(){
			this.addFormVisible = true;
		},
		//
		async getGoodsSpuList(){
	    this.page = this.page
			let params = {
				limit:this.limit,
				page:this.page,
        merchant_medicine_id:this.$route.query.id
			}
			const res = await this.$api.getGoodsSpuList(params);
      if(res.data.level=='success'){
        let list = res.data.data;
				this.bannerList = list;
				this.pageTotal = res.data.page_info.total
      }else{
        this.$message({
          message: res.data.message,
          type: 'warning'
        });
      }
		},
		//编辑获取轮播图信息
		async getGoodsSpuDetail(id){
			const params = {
				id: id
			}
			const res = await this.$api.getGoodsSpuDetail(params);
      if(res.data.level=='success'){
          this.editForm.id = res.data.data.id,
          this.editForm.merchant_medicine_id = res.data.data.merchant_medicine_id,
          this.editForm.spu_name = res.data.data.spu_name,
          this.editForm.specification = res.data.data.specification,
          this.editForm.price =  res.data.data.price,
          this.editForm.stock =  res.data.data.stock,
          this.editForm.sort =  res.data.data.sort,
          this.editForm.status =  res.data.data.status
          this.editFormVisible = true;
      }else{
        this.$message({
          message: res.data.message,
          type: 'warning'
        });
      }
		},
		//编辑提交按钮
    async editSubmitBtn(){
      const params = this.editForm;
      const res = await this.$api.setGoodsSpu(params);
      if(res.data.level=='success'){
				this.$message({
          message: '修改成功',
          type: 'success'
        });
				this.editFormVisible = false;
        this.getGoodsSpuList();
      }else{
        this.$message({
          message: res.data.message,
          type: 'warning'
        });
      }
    },
    //新增提交按钮
		async addSubmitBtn(){
			const params = this.addForm;
      const res = await this.$api.setGoodsSpu(params);
      if(res.data.level=='success'){
				this.$message({
          message: '修改成功',
          type: 'success'
        });
				this.addFormVisible = false;
        this.getGoodsSpuList();
      }else{
        this.$message({
          message: res.data.message,
          type: 'warning'
        });
      }
		},
		//删除轮播图
		async delGoodsSpu(id){
			const params = {
        id:id,
			}
			//删除
			const judge= this.$confirm('删除该规格?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					let res = await this.$api.delGoodsSpu(params)
					if(res.data.level=='success'){
						this.getGoodsSpuList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
				}).catch(() => {
			});
		}
	}
}
</script>
<style lang='scss' scoped>
  .banner{
    padding: 10px 30px;
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}
  .member .el-dialog__body{overflow: auto;}
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
